<template>
  <div class="container">
      <div class="search-box">
          <input type="text" v-model="search_name" maxlength="16" placeholder="搜索...">
          <button class="search-btn" @click="getSearchResults"></button>
      </div>

      <div class="loading" v-if="!loaded">
           <h2>加载中,等一小下</h2>
           <div class="rect"></div>
      </div>

      <div class="warning">
          <h2>{{warning}}</h2>
      </div>

      <div class="search-result">
        <router-link to="" v-for="(item,i) in results"  :key="i">
            <div class="post" :style='{background:"url("+item.images[0]+")",backgroundSize: 330+"px", backgroundRepeat:"no-repeat"}'>
                <div class="content">
                    <p class="title">{{item.post_title}}</p>
                    <p class="summary">{{item.summary}}</p>
                </div>
            </div>
        </router-link>
      </div>

  </div>
</template>

<script>
export default{
    data(){
        return{
            search_name:'',
            warning:'',
            loaded:true,
            results:[],
            test1:'src/images/test/1.jpg',
        }
    },
    mounted:function(){
        this.$store.commit('setTitle','search');
        this.$store.commit('switchIsOriginPath',true);          
    },
    methods:{
        getSearchResults(){
            if(this.search_name==''){
                this.warning="请输入要搜索的内容";
            }else{
                this.loaded=false;
                var msg={search_name:this.search_name};
                this.$http.get(this.$store.state.server_home_url+'/search',{params:msg}).then((res) => {
                    if(res.body.status==0){
                    this.results=res.body.data.reverse(); 
                    this.loaded=true;                     
                    }else{
                        this.warning="什么都没找到啊T T";
                        this.loaded=true; 
                    }
                },(err) => {
                    console.log(err);
                }) 
            }
        }
    }
}
</script>


<style lang="scss" scoped>
    .container{
        .search-box{
            width:70%;
            margin:35% auto 0 auto;
            display: flex;
            input{
                width:100%;
                height:34px;
                font-size:20px;
                background: #ddd;
            }
            .search-btn{
                margin-left:10px;
                border:0px;
                width: 48px;
                height: 39px;
                background: url('../../images/icons/search-btn-black.png');
                background-size:42px 39px;                  
            }
        }

        .loading{
            h2{
                text-align: center;
                color:green;
            }
            @keyframes myfirst{
            from {margin-left:10%;}
            to {margin-left:80%;}
            }

            @-moz-keyframes myfirst{
            from {margin-left:10%;}
            to {margin-left:80%;}
            }

            @-webkit-keyframes myfirst{
            from {margin-left:10%;}
            to {margin-left:80%;}
            }

            @-o-keyframes myfirst{
            from {margin-left:10%;}
            to {margin-left:80%;}
            }            
            .rect{
                width:35px;
                height:35px;
                background: greenyellow;
                animation: myfirst 2s infinite;
                -moz-animation: myfirst 2s infinite;	/* Firefox */
                -webkit-animation: myfirst 2s infinite;	/* Safari 和 Chrome */
                -o-animation: myfirst 2s infinite;	/* Opera */
            }         
        }

        .warning{
            width:70%;
            margin:5% auto 0 auto;
            color:red;
        }
        .search-result{
            .post{
                margin: 35px auto;
                padding-top:100px;
                border-radius: 10px 10px;
                width:290px;
                height: 80px;
                box-shadow: black 8px 8px 8px;
                .content{
                    background: rgba($color: #000000, $alpha: 0.5);
                    padding: 5px 4% 0px 4%;
                    width: 92%;
                    height: 75px;
                    overflow: hidden;
                    border-radius: 0px 0px 10px 10px;

                    p{  
                        word-wrap: break-word;
                        margin:0;
                        padding:0;
                        color:white;

                    }
                    .title{
                        font-size: 15px;
                    }
                    .summary{
                        font-size: 10px;
                    }
                }
            }
        }

    }
</style>